<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 考试座位管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .user-list-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            margin-bottom: 20px;
        }
        .table th {
            background-color: #f8f9fa;
        }
        .badge-admin {
            background-color: #dc3545;
            color: white;
        }
        .badge-user {
            background-color: #28a745;
            color: white;
        }
        .status-active {
            color: #28a745;
        }
        .status-inactive {
            color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="container user-list-container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">用户管理</h3>
                        <a th:href="@{/dashboard}" class="btn btn-light">返回首页</a>
                    </div>
                    <div class="card-body">
                        <div th:if="${success}" class="alert alert-success" role="alert">
                            <span th:text="${success}"></span>
                        </div>
                        
                        <div th:if="${error}" class="alert alert-danger" role="alert">
                            <span th:text="${error}"></span>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>姓名</th>
                                        <th>邮箱</th>
                                        <th>角色</th>
                                        <th>状态</th>
                                        <th>注册时间</th>
                                        <th>最后登录</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="user : ${users}">
                                        <td th:text="${user.id}">1</td>
                                        <td th:text="${user.username}">admin</td>
                                        <td th:text="${user.fullName}">管理员</td>
                                        <td th:text="${user.email}">admin@example.com</td>
                                        <td>
                                            <span class="badge rounded-pill" 
                                                  th:classappend="${user.role == 'ROLE_ADMIN' ? 'badge-admin' : 'badge-user'}"
                                                  th:text="${user.role == 'ROLE_ADMIN' ? '管理员' : '普通用户'}">管理员</span>
                                        </td>
                                        <td>
                                            <span class="fw-bold" 
                                                  th:classappend="${user.isActive ? 'status-active' : 'status-inactive'}"
                                                  th:text="${user.isActive ? '启用' : '禁用'}">启用</span>
                                        </td>
                                        <td th:text="${#dates.format(user.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                                        <td th:text="${user.lastLogin != null ? #dates.format(user.lastLogin, 'yyyy-MM-dd HH:mm') : '从未登录'}">2023-01-01 12:00</td>
                                        <td>
                                            <div class="btn-group">
                                                <form th:action="@{/users/toggle-status/{id}(id=${user.id})}" method="post" class="me-2">
                                                    <button type="submit" class="btn btn-sm" 
                                                            th:classappend="${user.isActive ? 'btn-warning' : 'btn-success'}"
                                                            th:text="${user.isActive ? '禁用' : '启用'}"
                                                            th:disabled="${user.username == 'admin'}">禁用</button>
                                                </form>
                                                
                                                <form th:action="@{/users/change-role/{id}(id=${user.id})}" method="post" class="me-2">
                                                    <input type="hidden" name="role" th:value="${user.role == 'ROLE_ADMIN' ? 'ROLE_USER' : 'ROLE_ADMIN'}">
                                                    <button type="submit" class="btn btn-sm btn-info"
                                                            th:text="${user.role == 'ROLE_ADMIN' ? '设为普通用户' : '设为管理员'}"
                                                            th:disabled="${user.username == 'admin'}">更改角色</button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>